<template>
  <div>
    <el-tree ref="tree" :data="treeData" show-checkbox :props="treeprops" node-key="id"></el-tree>
    <el-button @click="confirm" type="primary">确认</el-button>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      required: true
    },
  },
  data() {
    return {
      treeData: [],
      treeprops: {
        label: 'menusname',
        children: 'children',

      },
      checkedMenus: [],

    };
  },
  mounted() {
    this.getMenus();
    this.showMenus();
  },
  methods: {
    async getMenus() {
      let res = await this.$API.SystemMenus.reqselectMenus();
      if (res.code === 200) {
        this.treeData = res.data;
        
      }
    },
    async showMenus() {
      let res = await this.$API.SystemMenus.updateMenus(this.id);
      if (res.code === 200) {
        this.checkedMenus = res.data;
        this.$refs.tree.setCheckedKeys(this.checkedMenus, true);
      }
    },
    confirm() {
      const checkedKeys = this.$refs.tree.getCheckedKeys();
      this.updateMenus(checkedKeys);
      
    },
    async updateMenus(checkedKeys) {
      let res = await this.$API.SystemMenus.updateRoleMenus(checkedKeys, this.id);
      if (res.code === 200) {
        
        this.$message({ message: '修改成功', type: 'success' })
        this.$emit('close')

      }
    },
  },
};
</script>